window.addEventListener('load',function(){
    var arrow_l=document.querySelector('.arrow_l');
    var arrow_r=document.querySelector('.arrow_r');
    var focus=document.querySelector('.focus');
    var focusWidth=focus.offsetWidth;
    focus.addEventListener('mouseenter',function(){
        arrow_l.style.display='block';
        arrow_r.style.display='block';
        //当鼠标经过时，就会清除图片自动播放定时器
        clearInterval(timer);
        timer=null;
    })
    focus.addEventListener('mouseleave',function(){
        arrow_l.style.display='none';
        arrow_r.style.display='none';
        //当鼠标离开，就会再次设置定时器，实现图片自动播放
        timer=setInterval(function(){
            arrow_r.click();
        },2000);
    })
    //动态生成小圆圈个数，有几张图，就生成几个小圆圈
    var ul=focus.querySelector('ul');
    var ol=focus.querySelector('.circle');
    for(var i=0;i<ul.children.length;i++){
        var li=document.createElement('li');
        li.setAttribute('index',i);
        ol.appendChild(li);
        //点击小圆圈，实现图片滚动
        li.addEventListener('click',function(){
            for(var i=0;i<ol.children.length;i++){
                ol.children[i].className='';
            }
            this.className='current';
            var index=this.getAttribute('index');
            //当点击到某个li时，就将这个li的索引号给num,circle
            num=index;
            circle=index;
            // var focusWidth=focus.offsetWidth;因为focusWidth写在这是局部变量，所以直接将其写在最上面，作为全局变量
            animate(ul,-index*focusWidth);
        })
    }
    ol.children[0].className='current';
    //克隆第一张图片
    var first=ul.children[0].cloneNode(true);
    ul.appendChild(first);
    //点击右侧按钮，实现图片滚动
    var num=0;
    var circle=0;
    // 节流阀，目的是在快速点击按钮时，也必须先将每一张图片都显示出再进行下一张
    var flag=true;
    arrow_r.addEventListener('click',function(){
        if(flag){
            flag=false;
            if(num==ul.children.length-1){
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul,-num*focusWidth,function(){
                flag=true;
            });
            //点击右侧按钮，小圆圈也会跟着变化
            circle++;
            if(circle==ol.children.length){
                circle=0;
            }
            //调用函数
            circleChange();
        } 
    })
    //左侧按钮点击，实现图片滚动
    arrow_l.addEventListener('click',function(){
        if(flag){
            flag=false;
            if(num==0){
                num=ul.children.length-1;
                ul.style.left=-num*focusWidth+'px';
            }
            num--;
            animate(ul,-num*focusWidth,function(){
                flag=true;
            });
            //点击右侧按钮，小圆圈也会跟着变化
            circle--;
            // if(circle<0){
            //     circle=ol.children.length-1;
            // }
            circle=circle < 0 ? ol.children.length-1 : circle;
            //调用函数
            circleChange();
        }   
    })
    function circleChange(){
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className='';
        }
        ol.children[circle].className='current';
    }
    var timer=setInterval(function(){
        arrow_r.click();
    },2000);
    
})